<template>
    <div class="seriesdialog">
        <el-dialog :model-value="localDialogVisible" :title="localTitle" :before-close="localCancelDialog" width="60%"
            top="5vh">
            <create-form :toDialogData="getDialogData" @cancelDialog="localCancelDialog" @getData="localGetData" ref="createFormRef" />
        </el-dialog>
    </div>
</template>

<script>
    import CreateForm from './CreateForm'
    import { toRef,ref } from 'vue'
    export default {
        name: "",
        components: {
            CreateForm,
        },
        props:{
            visible: {
                type: Boolean,
                default: false
            },
            toDialogData:{
                type: Object
            }
        },
        emits:['cancelDialog','getData'],
        setup(props,context) {
            const localDialogVisible = toRef(props, 'visible')
            const getDialogData = toRef(props, 'toDialogData')
            const localCancelDialog = () => {
                context.emit('cancelDialog')
            }
            const localGetData = () => {
                context.emit('getData')
            }
            const localTitle = ref('子集添加')
            if( getDialogData.value.seriesid != undefined ){
                localTitle.value = '子集编辑'
            }
            const createFormRef = ref('')
            const init = () => {
                createFormRef.value.init()
            }

            return {
                localTitle,
                localDialogVisible,
                getDialogData,
                localCancelDialog,
                localGetData,
                createFormRef,
                init
            }
        }
    }
</script>

<style scoped  lang="scss">
    .el-divider--horizontal{
        margin:0 0 15px;
    }
    .el-divider{
        border-top: 1px dashed #ddd;
        background-color: transparent;
    }
    
</style>
<style lang="scss">
    .seriesdialog{
        .el-dialog__body{
            max-height: calc(76vh);
            overflow: hidden;
            position: relative;
            overflow-y: auto;
        }
    }

    :deep(.upload-box .el-upload-list--picture-card .el-upload-list__item){
        margin-bottom: -15px;
    }
    :deep(.upload-box .el-upload--picture-card){
        border: none;
    }
    .liveimglist{
        display: flex;
        flex-wrap: wrap;
        line-height: initial;
        li {
            position: relative;
            width: 160px;
            margin-right: 15px;
            margin-bottom: 10px;
            display: block;
            border-radius: 4px;
            .el-image{
                border:1px solid rgba(153, 153, 153, 0.4);
                border-radius: 4px;
            }
            .edit-image{
            display: flex;
            position: absolute;
            bottom:0;
            right:0;
            padding: 4px 9px;
            color:#fff;
            font-size: 12px;
            background-color: rgba(0,0,0,0.6);
            };
            .delete-image {
            display: flex;
            position: absolute;
            top:0;
            right:0;
            padding: 3px;
            .el-icon{
                font-size:20px;
            }
            }
            .gtitle{
                margin: 5px 0 2px;
                height: 42px;
                font-size: 14px;
                font-weight: bold;
                color:#333;
            }
            .gsubtitle{
                font-size: 12px;
                color:#666;
                display:flex;
                justify-content: space-between;
            }
        }
        li.imgplus{
            >div{text-align: center;line-height:normal;}
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items: center;
            width: 160px;
            height: 100px; overflow: hidden;
            border: 1px dashed rgba(153,153,153,0.4);
            background: rgba(222,222,222,0.4); cursor: pointer;
            .el-icon{font-size: 28px;color:#999;}
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
    }
</style>